<!doctype html>
<html class="no-js" lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>login</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Favicon -->
    <link rel="shortcut icon" type="image/x-icon" th:href="@{/assets/img/favicon.ico}">

    <!-- CSS
    ========================= -->
    <!--bootstrap min css-->
    <link rel="stylesheet" th:href="@{/assets/css/bootstrap.min.css}">
    <!--owl carousel min css-->
    <link rel="stylesheet" th:href="@{/assets/css/owl.carousel.min.css}">
    <!--slick min css-->
    <link rel="stylesheet" th:href="@{/assets/css/slick.css}">
    <!--magnific popup min css-->
    <link rel="stylesheet" th:href="@{/assets/css/magnific-popup.css}">
    <!--font awesome css-->
    <link rel="stylesheet" th:href="@{/assets/css/font.awesome.css}">
    <!--ionicons css-->
    <link rel="stylesheet" th:href="@{/assets/css/ionicons.min.css}">
    <!--7 stroke icons css-->
    <link rel="stylesheet" th:href="@{/assets/css/pe-icon-7-stroke.css}">
    <!--animate css-->
    <link rel="stylesheet" th:href="@{/assets/css/animate.css}">
    <!--jquery ui min css-->
    <link rel="stylesheet" th:href="@{/assets/css/jquery-ui.min.css}">
    <!--plugins css-->
    <link rel="stylesheet" th:href="@{/assets/css/plugins.css}">

    <!-- Main Style CSS -->
    <link rel="stylesheet" th:href="@{/assets/css/style.css}">

    <!--modernizr min js here-->
    <script th:src="@{/assets/js/vendor/modernizr-3.7.1.min.js}"></script>

</head>

<body>

  <!--header area start-->
    
    <!--offcanvas menu area start-->
    <div class="off_canvars_overlay">
                
    </div>
    <div th:insert="~{/index::menu}">

    </div>
    <!--offcanvas menu area end-->
    
    <header th:insert="~{/index::header}">
    </header>
    <!--header area end-->

    <!--breadcrumbs area start-->
    <div class="breadcrumbs_area breadcrumbs_bg">
        <div class="container">   
            <div class="row">
                <div class="col-12">
                    <div class="breadcrumb_content">
                        <h3>Login</h3>
                        <ul>
                            <li><a href="index.html">home</a></li>
                            <li>Login</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>         
    </div>
    <!--breadcrumbs area end-->
    
    <!-- customer login start -->
    <div class="customer_login">
        <div class="container">
            <div class="row">
               <!--login area start-->
                <div class="col-lg-6 col-md-6">
                    <div class="account_form">
                        <h2>login</h2>
                        <form th:action="@{/login222}" method="post">
                            <p>   
                                <label>ID<span>*</span></label>
                                <input type="text" placeholder="id" name="id" value="422202199904056117">
                             </p>
                             <p>   
                                <label>Passwords <span>*</span></label>
                                <input name="password" value="123456">
                             </p>   
                            <div class="login_submit">
                               <a href="#">Lost your password?</a>
                                <input type="checkbox" name="remember"> 记住我
                                <button type="submit">login</button>
                                
                            </div>

                        </form>
                     </div>    
                </div>
                <!--login area start-->

                <!--register area start-->
                <div class="col-lg-6 col-md-6">
                    <div class="account_form register">
                        <h2>Register</h2>
                        <form action="#">
                            <p>   
                                <label>Email address  <span>*</span></label>
                                <input type="text">
                             </p>
                             <p>   
                                <label>Passwords <span>*</span></label>
                                <input type="password">
                             </p>
                            <div class="login_submit">
                                <button type="submit">Register</button>
                            </div>
                        </form>
                    </div>    
                </div>
                <!--register area end-->
            </div>
        </div>    
    </div>
    <!-- customer login end -->
    
    <!--footer area start-->
    <footer th:replace="~{/index::footer}">

    </footer>
    <!--footer area end-->


  <!-- JS
  ============================================ -->
  <!--jquery min js-->
  <script th:src="@{/assets/js/vendor/jquery-3.5.0.min.js}"></script>
  <!--popper min js-->
  <script th:src="@{/assets/js/popper.js}"></script>
  <!--bootstrap min js-->
  <script th:src="@{/assets/js/bootstrap.min.js}"></script>
  <!--owl carousel min js-->
  <script th:src="@{/assets/js/owl.carousel.min.js}"></script>
  <!--slick min js-->
  <script th:src="@{/assets/js/slick.min.js}"></script>
  <!--magnific popup min js-->
  <script th:src="@{/assets/js/jquery.magnific-popup.min.js}"></script>
  <!--jquery countdown min js-->
  <script th:src="@{/assets/js/jquery.countdown.js}"></script>
  <!--jquery ui min js-->
  <script th:src="@{/assets/js/jquery.ui.js}"></script>
  <!--jquery elevatezoom min js-->
  <script th:src="@{/assets/js/jquery.elevatezoom.js}"></script>
  <!--isotope packaged min js-->
  <script th:src="@{/assets/js/isotope.pkgd.min.js}"></script>
  <!-- Plugins JS -->
  <script th:src="@{/assets/js/plugins.js}"></script>

  <!-- Main JS -->
  <script th:src="@{/assets/js/main.js}"></script>



</body>

</html>